<template>
  <div class="bankCardInfo">
    <van-nav-bar
        :title="$t('supplementary_information')"
        left-arrow
        @click-left="$router.push($route.query.backName)"
    />
    <div style="padding: 10px">
      <div class="content_list">
        <!--        收入证明-->
        <div class="content_item">
          <div style="flex: 1">
            <p class="title">{{ $t('upload_income') }}</p>
            <p class="tips">{{ $t('hint_upload_income') }}</p>
          </div>
          <van-uploader  accept="image/*" :before-read="beforeRead" :after-read="updateIncome">
            <img v-show="incomeUrl" class="image" :src="incomeUrl">
            <img v-show="!incomeUrl" class="image" :src="require('../../assets/icon_fill_prove.png')">
          </van-uploader>
        </div>
        <!--        收入证明-->
        <div class="content_item">
          <div style="flex: 1">
            <p class="title">{{ $t('upload_consume') }}</p>
            <p class="tips">{{ $t('hint_upload_consume') }}</p>
          </div>
          <van-uploader accept="image/*" :before-read="beforeRead" :after-read="updateConsume">
            <img v-show="consumeUrl" class="image" :src="consumeUrl">
            <img v-show="!consumeUrl" class="image" :src="require('../../assets/icon_fill_prove.png')">
          </van-uploader>
        </div>
      </div>
      <div class="confirm">
        <button @click="confirm">{{ $t('finish') }}</button>
      </div>
    </div>
  </div>
</template>

<script>
import {reactive, toRefs} from 'vue'
import {uploadWorkData} from '@/api/home'
import {useI18n} from 'vue-i18n'
import {Toast} from "vant";
import router from '@/router/index'

import {debounce,processNext,compressImage} from '@/utils/tool'
import {useRoute} from "vue-router";
import {useStore} from "vuex";

export default {
  setup() {
    const {tm} = useI18n()
    const  store = useStore()
    const routes = useRoute()
    let photoForm = reactive({
      incomeUrl: '',
      consumeUrl: ''
    })
    const beforeRead = (file) => {
      return new Promise(async (resolve, reject) => {
        const fileType = ['image/jpeg', 'image/png', 'image/jpg']
        if (fileType.indexOf(file.type) === -1) {
          Toast('upload_image');
          reject()
        } else if (file.size < Math.pow(1024, 2)) {
          // 小于1m不压缩
          resolve(file)
        } else {
          // 压缩图片
          const caseFile = await compressImage(file)
          resolve(caseFile)
        }
      })
    }
    const updateIncome = async ({file}) => {
      const formData = new FormData()
      formData.append('file', file)
      formData.append('type', 2)
      const res = await uploadWorkData(formData)
      if (res.code === 1) {
        photoForm.incomeUrl = res.data
      }
    }
    const updateConsume = async ({file}) => {
      const formData = new FormData()
      formData.append('file', file)
      formData.append('type', 3)
      const res = await uploadWorkData(formData)
      if (res.code === 1) {
        photoForm.consumeUrl = res.data
      }
    }
    const confirm = debounce(
        () => {
          const {incomeUrl, consumeUrl} = photoForm
          if (!incomeUrl) {
            Toast({
              message: tm('hint_upload_income')
            })
            return
          } else if (!consumeUrl) {
            Toast({
              message: tm('hint_upload_consume')
            })
            return
          }
          processNext('incomeProveInfo',routes.query.backName)
        }
    )
    // 清除loading
    store.dispatch('changeLoading', false)
    return {
      ...toRefs(photoForm),
      beforeRead,
      confirm,
      updateConsume,
      updateIncome
    }
  }
}
</script>

<style lang="less" scoped>
.bankCardInfo {
  background-color: #f2f3f5;
  overflow: auto;

  ::v-deep .van-nav-bar {
    background: linear-gradient(90deg, #FF5252, #FF8244) !important;
    z-index: 1999;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: #333333 !important;
  }

  ::v-deep .van-switch {
    height: 26px !important;

    .van-switch__node {
      height: 26px !important;
    }
  }

  .content_list {
    .content_item {
      border-bottom: solid 1px #f2f3f5;
      background-color: #ffffff;
      display: flex;
      padding: 10px 10px;
      justify-content: space-between;
      border-radius: 5px;
      margin-bottom: 10px;

      .image {
        width: 185px;
        height: 125px;
      }

      .title {
        font-size: 14px;
        color: #333333;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #333333;
        text-align: center;
      }

      .tips {
        font-size: 10px;
        color: #C0BFC0;
        text-align: center;
      }

      p {
        margin: 5px 0;
      }
    }
  }

  .confirm {
    margin-top: 20px;
    text-align: center;

    button {
      width: 300px;
      padding: 10px 0;
      color: #ffffff;
      border: none;
      font-size: 16px;
      background: linear-gradient(-45deg, #FF5252, #FF8C3C);
      box-shadow: 0px 4px 10px 0px rgba(255, 92, 78, 0.52);
      border-radius: 29px;
    }

  }
}
</style>
